<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Transform Transitions</title>
    <script type="text/javascript" src="../../d3.v2.js"></script>
    <style type="text/css">

body {
  margin: 0;
}

rect {
  stroke: #fff;
  stroke-width: .05px;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var width = 960,
    height = 500,
    z = 20,
    x = width / z,
    y = height / z;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("rect")
    .data(d3.range(x * y))
  .enter().append("rect")
    .attr("transform", translate)
    .attr("width", z)
    .attr("height", z)
    .style("fill", d3.scale.linear().domain([0, x * y]).range(["brown", "steelblue"]))
    .on("mouseover", mouseover);

function translate(d) {
  return "translate(" + (d % x) * z + "," + Math.floor(d / x) * z + ")";
}

function mouseover(d) {
  this.parentNode.appendChild(this);
  d3.select(this).transition()
      .duration(750)
      .attr("transform", "translate(480,480)scale(23)rotate(180)")
    .transition()
      .delay(1500)
      .attr("transform", "translate(240,240)scale(0)rotate(180)")
      .style("fill-opacity", 0)
      .remove();
}

    </script>
  </body>
</html>
